<template>
  <div align="center">
    <el-card class="box-card">
      <div slot="header" class="clearfix" align="left">
        <i class="el-icon-s-data"></i>
        <span>投票</span>
      </div>
      <div class="text item">
        <el-container>
          <el-header>
            <div id="topic-warn" align="left">
              <span>
                <font
                  size="4px"
                  color="red"
                >&nbsp;&nbsp;&nbsp;&nbsp;测试阶段。查看:https://gitee.com/wangyongliang666/vote.git</font>
              </span>
            </div>
          </el-header>
          <el-header>
            <div id="topic-middle" align="left">
              <el-button type="success" size="mini" @click="dialogVisible5=true">发起投票</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;与抽奖关联使用
            </div>
          </el-header>
          <el-main>
            <div class="topic-main" :key="index" v-for="(topic,index) in topics">
              <div align="left">
                <p>
                  <font size="3px">{{topic.theme}}</font>
                </p>
                <p>
                  <font
                    size="2px"
                    color="#C4C4C4"
                  >id:{{topic.tid}}&nbsp;发起时间：{{moment(topic.createdate).format("YYYY-MM-DD HH:mm:ss")}}</font>
                </p>
                <br />
                <p>
                  <font size="2.5px">
                    共{{topic.num}}人次参加
                    <el-button type="text" @click="tovote(topic)">查看榜单</el-button>
                  </font>
                </p>
              </div>
              <div align="right">
                <el-button type="success" size="mini" @click="setdefault(topic)">设置为首页显示</el-button>
                <el-button type="success" size="mini" @click="sjvote(topic)">手机参与投票</el-button>
                <el-button type="success" size="mini" @click="todovote(topic)">参与投票</el-button>
                <el-button type="success" size="mini" @click="tojudgeup(topic)">修改</el-button>
                <el-button type="success" size="mini" @click="tojudgedel(topic)">删除</el-button>
              </div>
            </div>
          </el-main>
          <el-footer>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagination.pageNo"
              :page-sizes="[3, 5, 7, 9]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total"
            ></el-pagination>
          </el-footer>
        </el-container>
      </div>
    </el-card>
    <!--添加投票信息-->
    <el-dialog title="添加投票信息" :visible.sync="dialogVisible" width="30%" @close="clear">
      <el-form inline v-model="topic" label-position="left">
        <el-form-item label="投票标题">
          <el-input size="mini" v-model="topic.theme"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" size="mini" @click="addvote">添加投票选项</el-button>
        </el-form-item>
        <div id="topic-add">
          <span v-for="(vote,index) in votes" :key="index">
            <el-form-item :label="'选项'+(index+1)">
              <el-input size="mini" v-model="vote.opt"></el-input>
            </el-form-item>
            <el-form-item>
              <i class="el-icon-delete" @click="delopt(index)"></i>
            </el-form-item>
          </span>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addtopic" type="success">发布投票</el-button>
      </span>
    </el-dialog>
    <!--修改投票信息-->
    <el-dialog title="修改投票信息" :visible.sync="dialogVisible2" width="30%" @close="clear">
      <el-form inline v-model="topic" label-position="left">
        <el-form-item label="投票标题">
          <el-input size="mini" v-model="topic.theme"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" size="mini" @click="addvote">添加投票选项</el-button>
        </el-form-item>
        <div id="topic-add">
          <span v-for="(vote,index) in votes" :key="index">
            <el-form-item :label="'选项'+(index+1)">
              <el-input size="mini" v-model="vote.opt"></el-input>
            </el-form-item>
            <el-form-item>
              <i class="el-icon-delete" @click="delopt(index)"></i>
            </el-form-item>
          </span>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="uptopic" type="success">修改投票</el-button>
      </span>
    </el-dialog>
    <div id="show" v-show="flag">
      <p style="float:left;margin-left:90px">手机扫码参与投票</p>
      <el-button
        style="float:right;margin-top:10px;margin-right:10px;"
        type="text"
        @click="closeshow"
      >关闭</el-button>
      <div id="qrcode" ref="qrcode"></div>
    </div>
    <el-dialog title="请输入操作密码" :visible.sync="dialogVisible3" width="30%" @close="clearpassword">
      <el-input type="password" size="mini" v-model="password"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="judgetoup">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="请输入操作密码" :visible.sync="dialogVisible4" width="30%" @close="clearpassword">
      <el-input type="password" size="mini" v-model="password"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="judgetodel">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="请输入操作密码" :visible.sync="dialogVisible5" width="30%" @close="clearpassword">
      <el-input type="password" size="mini" v-model="password"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="judgetoadd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      topic: {},
      votes: [],
      topics: [],
      pagination: {},
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dialogVisible5: false,
      flag: false,
      MyTest: null,
      password: ""
    };
  },
  mounted() {
    this.gettopics(1, 3);
  },
  methods: {
    setdefault(topic) {
      this.axios({
        method: "get",
        url: this.requestUrl + "topic/default",
        params: {
          tid: topic.tid
        }
      }).then(res => {
        console.log("设置默认返回结果", res);
        if (res.data.code == 200) {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "success"
          });
        }
      });
    },
    judgetoadd() {
      if (this.password == "666666") {
        this.topic = {};
        this.dialogVisible = true;
        this.dialogVisible5 = false;
      } else {
        this.$message({
          message: "操作密码错误",
          type: "warning"
        });
      }
    },
    judgetodel() {
      if (this.password == "666666") {
        this.dialogVisible4 = false;
        this.axios({
          method: "get",
          url: this.requestUrl + "topic/del?tids=" + this.topic.tid
        }).then(res => {
          console.log("删除主题信息", res);
          if (res.data.code == 200) {
            this.gettopics(this.pagination.pageNo, this.pagination.pageSize);
          }
        });
      } else {
        this.$message({
          message: "操作密码错误",
          type: "warning"
        });
      }
    },
    judgetoup() {
      if (this.password == "666666") {
        this.dialogVisible2 = true;
        this.dialogVisible3 = false;
        this.axios({
          method: "get",
          url: this.requestUrl + "vote/list",
          params: {
            tid: this.topic.tid
          }
        }).then(res => {
          console.log("根据tid查询该订单选项结果", res);
          if (res.data.code == 200) {
            this.votes = res.data.obj;
          }
        });
      } else {
        this.$message({
          message: "操作密码错误",
          type: "warning"
        });
      }
    },
    tojudgeup(topic) {
      this.dialogVisible3 = true;
      this.topic = JSON.parse(JSON.stringify(topic));
    },
    tojudgedel(topic) {
      this.dialogVisible4 = true;
      this.topic = JSON.parse(JSON.stringify(topic));
    },
    clearpassword() {
      //this.password = "";
    },
    closeshow() {
      this.flag = false;
    },
    sjvote(topic) {
      let url =
        "http://47.92.157.224/#/vote?tid=" +
        topic.tid +
        "&theme=" +
        topic.theme;
      this.flag = true;
      if (this.MyTest != null) {
        this.MyTest.clear();
        this.MyTest.makeCode(url);
      } else {
        this.MyTest = new QRCode(document.getElementById("qrcode"), url);
      }
    },
    todovote(topic) {
      // this.$router.push({
      //   path: "/vote",
      //   query: {
      //     tid: topic.tid,
      //     theme:topic.theme
      //   }
      // });
      window.open(
        "http://47.92.157.224/#/vote?tid=" +
          topic.tid +
          "&theme=" +
          topic.theme,
        "_blank"
      );
    },
    tovote(topic) {
      this.$router.push({
        path: "/votedetail",
        query: {
          tid: topic.tid
        }
      });
    },
    touptopic(topic) {},
    uptopic() {
      this.topic.voteJson = JSON.stringify(this.votes);
      this.axios({
        method: "post",
        url: this.requestUrl + "topic/up",
        data: this.qs.stringify(this.topic)
      }).then(res => {
        console.log("修改投票返回结果", res);
        if (res.data.code == 200) {
          this.dialogVisible2 = false;
          this.gettopics(this.pagination.pageNo, this.pagination.pageSize);
        }
      });
    },
    deltopic(topic) {
      this.axios({
        method: "get",
        url: this.requestUrl + "topic/del?tids=" + topic.tid
      }).then(res => {
        console.log("删除主题信息", res);
        if (res.data.code == 200) {
          this.gettopics(this.pagination.pageNo, this.pagination.pageSize);
        }
      });
    },
    delopt(index) {
      this.votes.splice(index, 1);
    },
    clear() {
      this.topic = {};
      this.votes = [];
    },
    handleSizeChange(val) {
      this.gettopics(this.pagination.pageNo, val);
    },
    handleCurrentChange(val) {
      this.gettopics(val, this.pagination.pageSize);
    },
    gettopics(pageNo, pageSize) {
      this.pagination.pageNo = pageNo;
      this.pagination.pageSize = pageSize;
      console.log("分页数据为pagination", this.pagination);
      this.axios({
        method: "get",
        url: this.requestUrl + "topic/list",
        params: this.pagination
      }).then(res => {
        console.log("查询topic列表返回结果", res);
        this.topics = res.data.obj.list;
        this.pagination.total = res.data.obj.total;
      });
    },
    addvote() {
      this.votes.push({});
    },
    addtopic() {
      this.topic.voteJson = JSON.stringify(this.votes);
      this.axios({
        method: "post",
        url: this.requestUrl + "topic/add",
        data: this.qs.stringify(this.topic)
      }).then(res => {
        console.log("发布投票返回结果", res);
        if (res.data.code == 200) {
          this.dialogVisible = false;
          this.gettopics(this.pagination.pageNo, this.pagination.pageSize);
        }
      });
    }
  }
};
</script>
<style scoped>
#show {
  width: 20%;
  height: 20%;
  background: rgb(255, 255, 255);
  position: fixed;
  top: 30%;
  left: 40%;
}
#topic-add {
  border: 0.5px rgb(187, 178, 178) solid;
  width: 80%;
}
.topic-main {
  padding-left: 10px;
  padding-right: 10px;
  height: 200px;
  margin-bottom: 10px;
  border: 0.5px rgb(187, 178, 178) solid;
}
#topic-middle {
  margin-top: 10px;
  height: 60px;
  justify-content: left;
  align-items: center;
  display: -webkit-flex;
}
#topic-warn {
  background: rgb(241, 140, 140, 0.8);
  height: 60px;
  border: 1px red solid;
  justify-content: left;
  align-items: center;
  display: -webkit-flex;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.header {
  margin-top: 10px;
  margin-bottom: 10px;
}
.box-card {
  width: 80%;
}
.el-main {
  height: 700px;
}
</style>